<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>数组更新</title>
        <style type="text/css">
            .row { display: flex; border: 1px solid blue ; margin: 5px ; }
            .row>.id { flex-basis: 100px ; text-align: center ; }
            .row>.name { flex-basis: 300px ; text-align: center ; }
            .row>.price { flex-basis: 100px ; text-align: right ; }
        </style>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <div id="app">
            <input type="number" v-model="id" placeholder="编号" >
            <input type="text" v-model="name" placeholder="名称" >
            <input type="number" v-model="price" placeholder="价格" >
            <button v-on:click="add">添加</button>
            <hr>
            <div class="wrapper">
                <div class="row" v-for="book in books" >
                    <span class="id">{{ book ? book.id : '' }}</span>
                    <span class="name">{{ book ? book.name : '' }}</span>
                    <span class="price">{{ book ? book.price : '' }}</span>
                </div>
            </div>
        </div> 

        <script type="text/javascript">
            const app = Vue.createApp({
                // 指定根组件的 Data Property
                data(){
                    return {
                        id: '' ,
                        name: '' ,
                        price: '' ,
                        books: [
                            { id: 1234 , name: '废物是如何练成的' , price: 98 },
                            { id: 2345 , name: '废柴是如何练成的' , price: 88 },
                            { id: 3456 , name: 'Vue从入门到放弃' , price: 108 }
                        ]
                    }
                },
                // 指定根组件的 方法(method)
                methods: {
                    add(){
                       let x = { id: this.id , name: this.name , price: this.price } 
                       console.log( this.books );
                       // this.books.push( x );
                       // this.books[ this.books.length ] = x ;
                       // this.books[ 0 ] = x ;
                       this.books.length = 5 ;
                       console.log( this.books );
                       this.id = '' ;
                       this.name = '' ;
                       this.price = '' ;
                    }
                }
            });

            const vm = app.mount( '#app' );
            console.log( vm );
        </script>
        
    </body>
</html>